import React, { PureComponent } from 'react';
import { EventEmitter } from 'events'
// yarn add events 添加这个 events 库实现跨组件事件传递
const eventBus = new EventEmitter()

class ProfileHeader extends PureComponent {
  render() {
    return (
      <div>
        <button onClick={e => this.btnClick()}>按钮</button>
      </div>
    )
  }
  btnClick() {
    eventBus.emit("headerClick", "why", 18)
  }
}
class Profile extends PureComponent {
  render() {
    return (
      <div>
        <ProfileHeader />
        <ul>
          <li>设置1</li>
          <li>设置2</li>
          <li>设置3</li>
          <li>设置4</li>
          <li>设置5</li>
        </ul>
      </div>
    )
  }
}

class App extends PureComponent {
  componentDidMount() {
    eventBus.addListener("headerClick", this.headerClick)
  }
  headerClick(name, age) {
    console.log(name, age);
  }
  componentWillUnmount() {
    eventBus.removeListener("headerClick", this.headerClick)
  }
  render() {
    return (
      <div>
        <Profile/>
        <h2>其他内容</h2>
      </div>
    );
  }
}



export default App;